<template>  
  <div>
      <div id="toolbar-container" class="toolbar"></div>
      <div id="text-container" class="text"></div>
    </div> 
</template>  
  
<script>  
  import E from 'wangeditor'  
  export default {  
    name: 'editoritem',  
    data() {  
      return {  
        uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadWang",
        baseUrl: process.env.VUE_APP_BASE_API,
        editor: null
      }  
    },
    mounted() {
      var that=this;
      // 创建编辑器
      this.editor = new E("#toolbar-container", "#text-container")
      this.editor.config.uploadImgServer = this.uploadUrl;
      this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
      this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
      this.editor.config.uploadFileName = 'fileName'
      this.editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        'emoticon',
        'image',
        // 'video',
        'table',
        // 'code',
        'splitLine',
        'undo',
        'redo',
    ]
    this.editor.config.onchange = function (newHtml) {
      console.log(newHtml)
      that.$emit("on-text-change", newHtml);
    }
    // 配置触发 onchange 的时间频率，默认为 200ms
    this.editor.config.onchangeTimeout = 500 // 修改为 500ms
      this.editor.config.uploadImgHooks = {
          // 上传图片之前
          before: function(xhr) {
              console.log(xhr)
              
          },
          // 图片上传并返回了结果，图片插入已成功
          success: function(xhr) {
              console.log('success', xhr)
          },
          // 图片上传并返回了结果，但图片插入时出错了
          fail: function(xhr, editor, resData) {
              console.log('fail', resData)
          },
          // 上传图片出错，一般为 http 请求的错误
          error: function(xhr, editor, resData) {
              console.log('error', xhr, resData)
          },
          // 上传图片超时
          timeout: function(xhr) {
              console.log('timeout')
          },
          // 图片上传并返回了结果，想要自己把图片插入到编辑器中
          // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
          // customInsert: function(insertImgFn, result) {

          // }
      }
      this.editor.create()
    },
    beforeDestroy() {
      // 销毁编辑器
      this.editor.destroy()
      this.editor = null
    },
    methods:{
      initEditor(){
        this.editor.txt.html("");
      },
      setText(text){
        if(text==undefined||text==null){
          this.editor.txt.html("");
        }
        else{
          this.editor.txt.html(text);
        }
        
      },
     }
   
  }  
</script>  
  
<style>
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  min-height: 300px;
}
</style>